<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ动画</title>
    <style>
        .wy{
            background-color: darkgoldenrod;
            width: 400px;
            text-align: center;
            height: 400px;
            line-height: 400px;
            font-size: large;
        }
        .dys{
            background-color: darkgreen;
            width: 60%;
            height: 400px;
            font-size: larger;
        }
        .dgq div{
            width: 500px;
            height: 300px;
            background-color: darkgreen;
        }
        .fadeH{
            width: 100px;
            height: 200px;
            background-color: darkorange;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div class="wy">无语闭嘴</div>
    <div class="dys" style="display: none;">登月僧</div>
    <button class="btnSH">show/hide</button>
    <div class="btns">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>10</button>
    </div>
    <button class="toggle">toggle切换</button>

    <h4>slide演示</h4>
    <ul class="dgq">
        <li>
            <a>slideDown</a>
            <div>丁根全给我闭嘴</div>
        </li>

    </ul>

    <h4 class="fadeH">淡入淡出</h4>
    <button class="btn1">按钮1</button>
    <button class="btn2">按钮2</button>
    <button class="btnToggle">淡入淡出的切换</button>
    <button class="fadOp">fadeTo opacity</button>

    <div class="pwb" style="background-color: red;">
        潘玮柏的老婆似乎是外围
    </div>
</body>
<script>
    $(function(){
        $('.btnSH').click(function(){
            // 隐藏,参数1，速度，slow，normal，fast，自己填5000 ms,参数2，一般默认，参数3回调函数（hide方法执行完毕后执行这个回调函数）
            $('.wy').hide(7000,'linear',function(){
                alert('xxx已经彻底隐藏了');
            });
            // 显示
            $('.dys').show('slow',function(){
                alert('xxx已经彻底显示了')
            });
        })
        $('.btns button').click(function(){
            console.log(this);
            $(this).hide();
            // alert();
        })

        $('.toggle').click(function(){
            // 在show和hide之间来回切换
            $('.btns').toggle();
        })

        $('.dgq a').click(function(){
            // $('.dgq div').slideUp(); // 向上
            // $('.dgq div').slideDown(4000,function(){  
            // display: none;
            //     console.log('已经向下展示了')
            // });  // 向下

            $('.dgq div').slideToggle();
        })

        $('.btn1').click(function(){
            $('.fadeH').fadeOut(4000);  // 淡出，消失
        })
        $('.btn2').click(function(){
            $('.fadeH').fadeIn();  // 淡入，出现显示
        })
        $('.btnToggle').click(function(){
            $('.fadeH').fadeToggle();
        })
        $('.fadOp').click(function(){
            // opacity 毕传 0--1
            $('.fadeH').fadeTo(3000,0.3);
        })
        $('.pwb').click(function(){
            $(this).animate({
                width:'300px',
                height:'200px',
                marginLeft:'300px'
                // border:'1px solid red'
            },4000)
        })
    })
</script>
</html>